<template>
  <div class="add">
    <div class="add-normal" v-for="item in giftData" :key="item.id">
      <p><img :src="item.imgUrl" alt="" /></p>
      <p style="margin-top:15px"><span class="gift-tag">赠品</span> {{item.name}} {{item.color}} ×{{item.count}}</p>
      <p style="color: #666; margin-top:15px;position:absolute;right:0">换赠品 ></p>
    </div>
  </div>
</template>

<script>
export default {
  props:['giftData']

}
</script>

<style scoped lang="scss">
.add-normal {
  display: flex;
  padding-right: 10px;
  margin-top: 5px;
  position: relative;
  p {
    font-size: 10px;
    line-height: 20px;
    margin-right: 5px;
    img {
      width: 40px;
      height: 45px;
    }
  }
  .gift-tag {
    padding: 0 5px;
    border: 1px solid orange;
    border-radius: 3px;
    color: orange;
    font-size: 10px;
    text-align: center;
  }
}
</style>